<!DOCTYPE html>
<html>

<head>
    <title>Dragalia Lost Damage Simulator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" type="image/png" href="/ui/favicon.png" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="/ui/dl_simc.js" type="text/javascript"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-159918955-2"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'UA-159918955-2');
    </script>
    <link rel="stylesheet" href="dl_simc.css">
</head>

<body>
    <form id="test-params" method="POST">
        <div class="form-group">
            <div class="form-row">
                <div class="col-md-3">
                    <label for="input-adv">Adventurer</label><select id="input-adv" class="form-control"></select>
                </div>
                <div class="col-md-3">
                    <label for="input-t">Simulation Time (s)</label><input id="input-t" class="form-control" type="text" />
                </div>
                <div class="col-md-3">
                    <label for="input-teamdps">Team DPS</label><input id="input-teamdps" class="form-control" type="text" />
                </div>
                <div class="col-md-3">
                    <label for="input-hp">HP</label><input id="input-hp" class="form-control" type="text" />
                </div>
            </div>
            <div class="form-row">
                <div class="col-sm-3">
                    <label for="input-wep">Weapon</label><select id="input-wep" class="form-control"></select>
                </div>
                <div class="col-sm-3">
                    <label for="input-dra">Dragon</label><select id="input-dra" class="form-control"></select>
                </div>
                <div class="col-sm-3">
                    <label for="input-wp1">Wyrmprint 1</label><select id="input-wp1" class="form-control"></select>
                </div>
                <div class="col-sm-3">
                    <label for="input-wp2">Wyrmprint 2</label><select id="input-wp2" class="form-control"></select>
                </div>
            </div>
            <div class="form-row">
                <div class="col-sm-6">
                    <label for="input-ss3">Skill 3</label><select id="input-ss3" class="form-control"></select>
                </div>
                <div class="col-sm-6">
                    <label for="input-ss4">Skill 4</label><select id="input-ss4" class="form-control"></select>
                </div>
            </div>
            <div class="form-row">
                <div class="col-sm-3">
                    <label for="input-acl">ACL</label>
                    &nbsp;
                    <div class="custom-control custom-checkbox custom-control-inline">
                        <input id="input-edit-acl" class="custom-control-input" type="checkbox" />
                        <label for="input-edit-acl" class="custom-control-label">Edit</label>
                    </div>
                    <textarea id="input-acl" class="form-control" disabled></textarea>
                </div>
                <div class="col-sm-9">
                    <label class="coab-label">Co-Abilities:</label>
                    <br />
                    <div id="input-coabs">
                        <div id="input-coabs-blade"></div>
                        <div id="input-coabs-wand"></div>
                        <div id="input-coabs-bow"></div>
                        <div id="input-coabs-dagger"></div>
                        <div id="input-coabs-sword"></div>
                        <div id="input-coabs-axe"></div>
                        <div id="input-coabs-lance"></div>
                        <div id="input-coabs-staff"></div>
                        <div id="input-coabs-other"></div>
                    </div>
                </div>
            </div>
            <div class="collapse" id="advanced-inputs">
                <div class="form-row" id="affliction-sim">
                    <div class="col-sm col-4">
                        <label for="input-res-poison">Poison Uptime (%)</label><input id="input-sim-poison" class="form-control" type="text" placeholder="0" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-paralysis">Paralysis Uptime (%)</label><input id="input-sim-paralysis" class="form-control" type="text" placeholder="0" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-burn">Burn Uptime (%)</label><input id="input-sim-burn" class="form-control" type="text" placeholder="0" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-frostbite">Frostbite Uptime (%)</label><input id="input-sim-frostbite" class="form-control" type="text" placeholder="0" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-sm-3">
                        <label for="input-sim-buff-str">Simulate +Str%</label><input id="input-sim-buff-str" class="form-control" type="text" />
                    </div>
                    <div class="col-sm-3">
                        <label for="input-sim-buff-def">Simulate -Def%</label><input id="input-sim-buff-def" class="form-control" type="text" />
                    </div>
                    <div class="col-sm-3">
                        <label for="input-sim-buff-count">Simulate Buff Counts</label><input id="input-sim-buff-count" class="form-control" type="text" />
                    </div>
                    <div class="col-md-3">
                        <label for="input-dragonbattle">Dragon Battle</label>
                        <select id="input-dragonbattle" class="form-control">
                            <option>Off</option>
                            <option value="1">On</option>
                        </select>
                    </div>
                    <!-- <div class="col-md-3">
                        <label for="input-missile">Missile</label><input id="input-missile" class="form-control" type="text" />
                    </div> -->
                </div>
                <div class="form-row">
                    <div class="col">
                        <label>Conditions</label>
                        <div id="input-conditions"></div>
                    </div>
                </div>
                <div class="form-row" id="affliction-resist">
                    <div class="col-sm col-4">
                        <label for="input-res-poison">Poison</label><input id="input-res-poison" class="form-control" type="text" placeholder="0" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-paralysis">Paralysis</label><input id="input-res-paralysis" class="form-control" type="text" placeholder="0" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-burn">Burn</label><input id="input-res-burn" class="form-control" type="text" placeholder="0" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-frostbite">Frostbite</label><input id="input-res-frostbite" class="form-control" type="text" placeholder="0" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-bog">Bog</label><input id="input-res-bog" class="form-control" type="text" placeholder="100" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-blind">Blind</label><input id="input-res-blind" class="form-control" type="text" placeholder="80" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-stun">Stun</label><input id="input-res-stun" class="form-control" type="text" placeholder="80" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-freeze">Freeze</label><input id="input-res-freeze" class="form-control" type="text" placeholder="80" />
                    </div>
                    <div class="col-sm col-4">
                        <label for="input-res-sleep">Sleep</label><input id="input-res-sleep" class="form-control" type="text" placeholder="80" />
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <button type="button" id="run-test" class="btn btn-primary">Run Test</button>
                    <button type="button" id="toggle-coab" class="btn btn-info" data-toggle="collapse" data-target="#advanced-inputs" aria-expanded="false" aria-controls="advanced-inputs">
                        Advanced
                    </button>
                    <!-- <button type="button" id="toggle-coab" class="btn btn-info" data-toggle="collapse" data-target="#coability" aria-expanded="false" aria-controls="coability">
                    Co-Abilities
                </button>
                <button type="button" id="toggle-advanced" class="btn btn-info" data-toggle="collapse" data-target="#conditions" aria-expanded="false" aria-controls="conditions">
                    Conditions
                </button>
                <button type="button" id="toggle-resist" class="btn btn-info" data-toggle="collapse" data-target="#affliction-resist" aria-expanded="false" aria-controls="affliction-resist">
                    Resist
                </button> -->
                    <button type="button" id="display-mode" class="btn btn-secondary"></button>
                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#damageLogBox">Log</button>
                    <button type="button" id="clear-results" class="btn btn-secondary">Clear</button>
                    <button type="button" id="reset-test" class="btn btn-secondary">Reset</button>
                    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#aboutBox">About</button>
                    <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#aclBox">ACL Guide</button>
                    <a href="https://notte.moe/a-quick-guide-to-dragalia-dps-simulator/">
                        <button type="button" class="btn btn-dark">Usage Guide</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="modal fade" id="aboutBox" tabindex="-1" role="dialog" aria-labelledby="aboutTitle" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="aboutTitle">About/FAQ</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <h5>What is this?</h5>
                        <p>This is a fork of the <a href="https://github.com/b1ueb1ues/dl">Dragalia Lost damage simulator created by b1ueb1ues</a> with a UI made to allow people without any python/CLI knowledge to use the simulator. The source code of this fork can be found <a href="https://github.com/Mushymato/dl">here</a>.</p>
                        <h5>What assumptions are made during damage simulation?</h5>
                        <p>Please consult <a href="https://github.com/b1ueb1ues/b1ueb1ues.github.io/blob/master/dl-sim/README.md">the readme</a> for assumed sim conditions. Note that some characters are simulated with expected value instead of average of 1000 trials.</p>
                        <h5>How do I enter ACL?</h5>
                        <p>Please consult <a href="https://github.com/b1ueb1ues/dl/blob/master/README.md">this page</a> for ACL syntax.</p>
                        <h5>How does simulated afflictions work?</h5>
                        <p>The affliction is considered [uptime]% effective for the entire duration of the simulation.</p>
                        <h5>How does simulated buff/debuff work?</h5>
                        <p>1 stack of the entered buff/debuff is active for the entire duration of the simulation.</p>
                        <h5>Why does only some characters use skill share?</h5>
                        <p>Skill share is an experimental feature for now.</p>
                        <h5>Something is <i>wrong</i> with this tool/Please add a new feature!</h5>
                        <p>Ask me on discord I'm chu2.718281828459045235360287471#0110</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="damageLogBox" tabindex="-1" role="dialog" aria-labelledby="damageLogTitle" aria-hidden="true">-->
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="damageLogTitle">Damage Log Chart</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <pre id="damage-log"></pre>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="aclBox" tabindex="-1" role="dialog" aria-labelledby="aclTitle" aria-hidden="true">-->
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="aclTitle">ACL Syntax</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <ul>
                            <li>Each consists of an action, optionally followed by a comma and condition, e.g. <code>s1, x=5</code></li>
                            <li>Lines starting with # is considered comment and not evaluated</li>
                            <li>` is a decorator that is removed from each line, this behavior exists due to historical reasons.</li>
                            <li>During the simulation, the ACL is read from top to bottom. When the action is available (e.g. skill is filled) and any specified condition is met, the action is executed. When none of the specified actions are used, the sim will perform the next auto attack (c1 c2 c3 c4 c5 then back to c1)</li>
                            <li>You can specify the same action multiple times, to cover different conditions.</li>
                            <li>It's also possible to specify blocks of actions+subconditions under one condition, using python-like if/elif/else syntax:<br />
                                <pre class="leftpad-code"><code>if &lt;condition&gt;
...
elif &lt;condition&gt;
...
else
...
end</code></pre>Unlike python, <code>end</code> is required and indentation does not matter.
                            </li>
                            <li>You can use <code>queue</code> to enforce a certain sequence of actions, for example:
                                <pre class="leftpad-code"><code>queue
`s1
`s1
`s2
end</code></pre>This forces 2 s1 uses before an s2 use, even if s2 was fully charged before the second s1 is cast.<br>
                                Queue can be used with a condition like <code>queue &lt;condition&gt;</code> such that the actions in that block are only queued when the condition is true.
                            </li>
                            <li>The built in actions include skills (s1, s2, s3), force strike (fs), a dodge roll (dodge), and shapeshift (dragon). Force strike fail (fsf) is an action too, but it is assumed to be performed for c5 hit of blade, wand, and lance.</li>
                            <li>Some adventurers have extra actions implemented, for example Ramona has s1a for using all hits on her s1.</li>
                            <li>The dragon action assumes you are doing the normal full duration optimal combo, but you can change that by using <code>dragon.act(act string)</code>. The act string syntax is:
                            <li>Each action is separated by a space, e.g. <code>dragon.act('c3 s c3 end')</code></li>
                            <li><code>cX</code> (e.g. <code>c3</code>) means do c1 to cX of the dragon combo chain. Most dragons go up to 3 combos, some have 5 combos.</li>
                            <li><code>s</code> means use skill (if they have usage left)</li>
                            <li><code>dodge</code> means do a dodge. Dodge is implicitly added after <code>cX</code> if dodge is faster than recovery or if the <code>cX</code> is not the final combo.</li>
                            <li><code>end</code> means preemptively stop the transform, used to represent dragon tanking.</li>
                            <li>The conditions are essentially python code that is evaluated so they can be just about anything, but the most commonly used ones are:
                                <ul>
                                    <li><code>x=n</code> or <code>seq=n</code>: the previous action was combo #n in the attack chain.</li>
                                    <li><code>fsc</code>: the previous action was force strike</li>
                                    <li><code>cancel</code>: the previous action was a combo or a force strike, equivalent to <code>x=1 or x=2 or x=3 or x=4 or x=5 or fsc</code>.</li>
                                    <li><code>s=n</code>: the previous action was skill #n</li>
                                    <li><code>s</code>: the previous action was a skill</li>
                                    <li><code>pin='prep'</code>: at the start of the fight if the adventurer has skill prep</li>
                                    <li><code>s1.charged</code> is the amount of sp charged on s1, you can combine it with <code>s1.sp</code> and <code>this.sp_val</code> to make conditions like <code>s1.charged&gt;=s1.sp-this.sp_val('fs')</code>, aka "do this action when S1 is one FS away from being fully charged. This can be used with s2 and s3 as well.</li>
                                    <li><code>s1.check()</code> signify that a skill is ready to use.</li>
                                    <li>``this.have_buff(buffname)` checks for presence of buff on certain character. The name of buffs is poorly documented with inconsistent naming scheme, but you can look at logs to figure out the specifics for your adventurer.</li>
                                    <li>You can use any python logical operators in the condition, such as <code>and</code> to combine 2 conditions</li>
                                    <li>For Agito weapons, <code>s3, not this.s3_buff</code> means only use S3 if the buff is not on, you can also check for what type of buff is currently active, e.g. <code>s3, this.s3_buff and this.s3_buff.mod_type = 'defense'</code></li>
                                    <li>Special conditions are implemented for some adventurers but unfortunately most aren't well documented nor universal. You most likely have to look at the source code to tell.</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div id="test-error"></div>
    <div id="test-results"></div>
    <div id="copy-results"></div>
</body>

</html>